// 资源管理
import React, {Component} from "react";
import {Button, Col, Row, Space, Typography} from 'antd'
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from '@/components/TheQueryForm'
import TheImage from '@/components/TheImage'

import {
    apiGetSearchThirdGoods,
} from "@/request/tripartiteMall/channelManagement";
const { Paragraph ,Link} = Typography;
export default class ChannelManagement extends Component {
    constructor(props) {
        super(props)
        this.queryFormRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: '商品ID',
                    dataIndex: 'id',
                    key: 'id',
                    render: (text, record) => {
                        return props.mode === 'tb' ? record.goodsId : record.goodsSign
                    }
                },
                {
                    title: '商品图片',
                    dataIndex: 'mainPic',
                    key: 'mainPic',
                    render: (text, render) => {
                        if (text) {
                            let arr = text.split(',')
                            return <Space>
                                {
                                    arr.map(v => {
                                        return <TheImage src={v} width={80} height={80}/>
                                    })
                                }
                            </Space>
                        }
                    }
                },
                {
                    title: '商品名称',
                    dataIndex: 'title',
                    key: 'title',
                    onCell: () => {
                        return {
                            style: {
                                whiteSpace: 'break-spaces',
                                maxWidth: 200
                            }
                        }
                    },
                    render: (text, record) => {
                        return <Paragraph
                            ellipsis={{
                                rows: 3,
                                expandable: false,
                            }}
                            title={text}
                            style={{margin:0}}
                        >
                            {props.mode==='tb'?<Link href={record.itemLink} target="_blank">
                                {text}
                            </Link>:text}
                        </Paragraph>
                    }
                },
                {
                    title: '店铺名称',
                    dataIndex: 'shopName',
                    key: 'shopName'
                },
                {
                    title: '佣金',
                    dataIndex: 'commission',
                    key: 'commission',
                    render: (text, record) => {
                        return <Space direction={'vertical'}>
                            <span>佣金率：{record.commissionRate}%</span>
                            <span>佣金：<React.$Price price={record.commission || 0}/></span>
                        </Space>
                    }
                },
                {
                    title: '月销',
                    dataIndex: 'monthSales',
                    key: 'monthSales'
                },
                {
                    title: '原价',
                    dataIndex: 'originalPrice',
                    key: 'originalPrice',
                    render: (text, record) => {
                        return <React.$Price price={text || 0}/>
                    }
                },
                {
                    title: '券面额',
                    dataIndex: 'couponPrice',
                    key: 'couponPrice',
                    render: (text, record) => {
                        return <Space direction={'vertical'}>
                            <span>
                                <React.$Price price={text || 0}/>
                            </span>
                            <span>{record.couponRemainQuantity}张</span>
                        </Space>
                    }
                },
                {
                    title: '到手价',
                    dataIndex: 'actualPrice',
                    key: 'actualPrice',
                    render: (text, record) => {
                        return <React.$Price price={text || 0}/>
                    }
                }
            ],
            pageData: {
                pageNo: 1,
                pageSize: 10,
            },
            dataSource: [],
            total: 0,
            isModalOpen: false,
            tbSearchOption: [
                {
                    field: 'keyWords',
                    label: '商品搜索',
                    placeholder: '输入你要搜索的商品/类目/链接',
                    rules: [{required: true}],
                    type: 'Input',
                    defaultValue: ''
                },
                {
                    field: 'price',
                    label: '价格',
                    rules: [],
                    type: 'NumRange',
                    minKey: 'priceLowerLimit',
                    maxKey: 'priceUpperLimit',
                    prefix: "￥",
                    otherConfig:{
                        precision:0,
                        max:Infinity,
                        min:0,
                    }
                },
                {
                    field: 'commissionRateLowerLimit',
                    label: '佣金率≥',
                    placeholder: '请输入',
                    rules: [],
                    type: 'InputNumber',
                    suffix: '%',
                    otherConfig:{
                        precision:2,
                        max:Infinity,
                        min:0
                    }
                },
                {
                    field: 'monthSalesLowerLimit',
                    label: '月销量≥',
                    placeholder: '请输入',
                    rules: [],
                    type: 'InputNumber',
                },
                {
                    field: 'couponPriceLowerLimit',
                    label: '券面额≥',
                    placeholder: '请输入',
                    rules: [],
                    type: 'InputNumber',
                    prefix: "￥",
                    otherConfig:{
                        precision:2,
                        max:Infinity,
                        min:0
                    }
                },
                {
                    field: 'tmall',
                    label: ' ',
                    text: '天猫',
                    rules: [],
                    type: 'Checkbox',
                    itemConfig: {
                        valuePropName : "checked",
                        colon: false
                    }
                },
            ],
            pddSearchOption: [
                {
                    field: 'keyWords',
                    label: '商品搜索',
                    placeholder: '输入你要搜索的商品/类目/链接',
                    required: false,
                    rules: [],
                    type: 'Input',
                    defaultValue: ''
                },
                {
                    field: 'price',
                    label: '价格',
                    rules: [],
                    type: 'NumRange',
                    minKey: 'priceLowerLimit',
                    maxKey: 'priceUpperLimit',
                    suffix: '元',
                    otherConfig:{
                        precision:0,
                        max:Infinity,
                        min:0,
                    }
                },
                {
                    field: 'coupon',
                    label: '券面额',
                    rules: [],
                    type: 'NumRange',
                    minKey: 'couponPriceLowerLimit',
                    maxKey: 'couponPriceUpperLimit',
                    suffix: '元',
                    otherConfig:{
                        precision:0,
                        max:Infinity,
                        min:0,
                    }
                },
                {
                    field: 'commission',
                    label: '佣金比例',
                    rules: [],
                    type: 'NumRange',
                    minKey: 'commissionRateLowerLimit',
                    maxKey: 'commissionRateUpperLimit',
                    suffix: '%',
                    otherConfig:{
                        precision:0,
                        max:Infinity,
                        min:0,
                    }
                },
            ],
            queryForm: {},
            selectedRowKeys: [],
            selectedRows: [],
            pageId: 1,
            listId: '',
        }
    }

    handleOk = () => {
        this.setState({
            isModalOpen: false
        })
    }
    handleCancel = () => {
        this.formRef.current.resetFields()
        this.setState({
            isModalOpen: false
        })
    }
    onFinish = () => {
        this.setState({
            isModalOpen: false
        })
    }

    onFormSearch(values) {
        this.setState({
            pageData: {pageNo: 1, pageSize: 10},
            queryForm: values,
            pageId: 1,
            listId: '',
        }, () => {
            this.getData()
        })
    }

    getData() {
        const {mode} = this.props
        let values = {...this.state.queryForm}
        values.priceLowerLimit *=100
        values.priceUpperLimit *=100
        values.couponPriceLowerLimit *=100
        values.couponPriceUpperLimit *=100

        if (mode === 'tb'){
            values.thirdType = 1
            values.pageId = this.state.pageId
            if (values.tmall){
                values.tmall = 1
            }
            else {
                delete values.tmall
            }
        }
        else {
            values.thirdType = 2
            values.listId = this.state.listId
        }

        apiGetSearchThirdGoods({
            ...values,
            ...this.state.pageData,
        }).then(res => {
            console.log(res)
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    pageData: {
                        pageNo: res.pageNo,
                        pageSize: res.pageSize
                    },
                    total: res.totalCount,
                })
            }
        })
    }

    // 分页
    pageChange = (pageNo, pageSize) => {
        let {dataSource} = this.state
        this.setState({
            pageData: {
                pageNo,
                pageSize,
            },
            pageId: dataSource[0]?dataSource[0].pageId:1,
            listId: dataSource[0]?dataSource[0].listId:''
        }, () => {
            this.getData()
        })
    };
    next = () => {
        let {pageNo} = this.state.pageData
        this.pageChange(pageNo+1,20)
    }
    onSelect = (selected, selectedRows) => {
        console.log(selected,selectedRows)
        this.setState({
            selectedRowKeys: selected,
            selectedRows: selectedRows
        })
    }

    onGetData() {
        return this.state.selectedRows
    }
    onReset() {
        this.setState({
            queryForm: {},
            pageId: 1,
            listId: '',
            pageData: {
                pageNo: 1,
                pageSize: 10,
            },
            dataSource: [],
            total: 0
        }, () => {
            // this.pageChange(1, 10)
        })
    }
    render() {
        const {
            columns,
            dataSource,
            pageData,
            total,
            pddSearchOption,
            tbSearchOption,
            selectedRowKeys
        } = this.state
        const {mode} = this.props

        const rowSelection = {
            getCheckboxProps: (record) => {
                return {
                    disabled: false
                }
            },
            preserveSelectedRowKeys: true,
            selectedRowKeys,
            onChange: this.onSelect,
            // onSelectAll: this.onSelectAll
        };
        return (
            <div>
                {
                    mode === 'pdd' ?
                        < TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={pddSearchOption}
                                       inline={true}
                                       onReset={() => this.onReset()}
                                       onGetValues={(values) => this.onFormSearch(values)}/>
                        : <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={tbSearchOption}
                                        inline={true}
                                        onReset={() => this.onReset()}
                                        onGetValues={(values) => this.onFormSearch(values)}/>
                }
                <TheTable
                    scroll={{x: "max-content", y: "63vh"}}
                    columns={columns}
                    dataSource={dataSource}
                    rowSelection={rowSelection}
                    rowKey={(record) => record.goodsId??record.goodsSign}
                />
                {
                    mode === 'tb' ?
                        <ThePagination
                            pageNo={pageData.pageNo}
                            pageSize={pageData.pageSize}
                            total={total}
                            pageChange={this.pageChange}
                        />:
                        <Row>
                            <Col span={24} style={{marginTop: 15,textAlign: 'right'}}>
                                <Space>
                                    {/*<Button>上一页</Button>*/}
                                    <Button onClick={()=>this.next()}>下一页</Button>
                                </Space>
                            </Col>

                        </Row>

                }
            </div>


        )
    }
}
